<template>
  <div class="login">
    <ul id="outCnt" style=display:none></ul>
    <el-form ref="loginForm" :model="loginForm" :rules="loginRules" class="login-form-key" label-width="90px">
      <h3 class="title">CA数字证书登录认证</h3>
      <input id="signedtext" type="hidden" name="signedtext" />
      <input id="cert" type="hidden" name="cert" />
      <input id="SerialNumber" type="hidden" name="SerialNumber" />
      <input id="source" type="hidden" name="source" />
      <input id="s" type="hidden" value="11111111" />
      <input type="hidden" id="oid" name="oid" value="" readonly="true" />

      <el-form-item label="证书名称" prop="certname">
        <el-input v-model="loginForm.certname" id="certname" type="text" auto-complete="off" placeholder="" disabled />
      </el-form-item>

      <el-form-item label="证书pin码" prop="password">
        <el-input v-model="loginForm.password" id="password" type="password" auto-complete="off" placeholder=""
          @keyup.enter="handleEnterKey" />
      </el-form-item>

      <!--      <el-form-item label="客服信任号" prop="userType">-->
      <!--        <el-input v-model="loginForm.username" type="text" auto-complete="off" placeholder="" disabled />-->
      <!--      </el-form-item>-->

      <el-form-item style="width: 100%;" label-width="0">
        <el-button size="mini" type="primary" style="width: 35%; margin-left: 5%" @click="login">数字证书登录</el-button>
        <el-button size="mini" type="primary" style="width: 25%" @click="Button3">刷新</el-button>
        <el-button size="mini" type="primary" style="width: 25%" @click="goBack">返回</el-button>
        <!--        <el-button size="mini" type="primary" style="width: 35%">获取客服信任号</el-button>-->
      </el-form-item>
    </el-form>
    <!--  底部  -->
    <!--    <div class="el-login-footer">-->
    <!--      <span>{{ system.YQDA_SYSTEM_COPYRIGHT }}</span>-->
    <!--    </div>-->
  </div>
</template>

<script>
import { caLogin, getRandom } from "@/api/UkeyLogin";
import { setExpiresIn, setToken } from "@/utils/auth";
import { getTaskById } from "@/api/activiti/task";
import { iszt } from '@/api/archive/dict/dictManageData'
export default {
  name: "UkeyLogin",
  data() {
    return {
      loginForm: {
        certname: undefined,
        password: undefined
      },
      loginRules: {
      },
      wsc: undefined,
      ps: 0,//区分不同WebSocket方法，做不同处理
      num: '',
      user: '',
      thismethod: '',
      lockReconnect: false, //避免ws重复连接
      SerialNumber: null, // 设备序列号
      oid: null, // 客服信任号
      certObj: null, // 证书信息
      signData: null, //签名数据原文（base64）
      autograph: '',
      flag: true
    }
  },
  created() {
    if ("WebSocket" in window) {
      // alert("您的浏览器支持 WebSocket!");
      // init the websocket client
      this.flag = true
      this.init()
    } else {
      alert("您的浏览器不支持WebSocket");
    }
    //防止浏览器退回
    history.pushState(null, null, document.URL);
    window.addEventListener("popstate", function () {
      history.pushState(null, null, document.URL);
    });

    if (this.$route.query.redirect != undefined) {
      this.redirect = this.$route.query.redirect
    }
  },
  methods: {
    echo(text) {
      var echoone = function (text) {
        var dom = document.createElement("li");
        var t = document.createTextNode(text);
        dom.appendChild(t);
        var cnt = document.getElementById("outCnt");
        cnt.appendChild(dom);
      };
      if (Array.isArray(text)) {
        text.map(function (t) {
          echoone(t);
        });
      } else {
        echoone(text);
      }
    },
    init() {
      var that = this;
      this.wsc = new WebSocket("ws://localhost:9000");
      that.wsc.onopen = function (event) {

        // console.log("连接成功");

        if (that.wsc.readyState == 1) {
          console.log("连接成功");
          that.ps = 0;
          //发送请求，获取设备序列号
          that.wsc.send(JSON.stringify({
            method: "SNCASerialNumber"
          }));
        } else if (that.wsc.readyState == 0) {
          console.log("连接尚未建立");
        } else if (that.wsc.readyState == 2) {
          console.log("连接正在进行关闭");
        } else if (that.wsc.readyState == 3) {
          console.log("连接已经关闭或者连接不能打开");
        }
      };
      that.wsc.onclose = function (event) {
        console.log(that.flag, '---------------')
        if (that.flag) {
          console.log("连接已经关闭", event);
          that.echo("连接已关闭");
          that.init()
        }
      };
      that.wsc.onerror = function (event) {
        console.log("连接失败", event);
        // window.location.reload();
        that.wsc.onclose()
      };
      that.wsc.onmessage = function (event) {
        var data = JSON.parse(event.data);
        console.log("ps == ", that.ps);
        console.log('获取到数据了', data);
        if (that.ps == 0) {
          var SerialNumber = data.SerialNumber.split('++');
          document.getElementById("SerialNumber").value = SerialNumber[0];
          if (!SerialNumber[0]) {
            alert("请插入ukey!")
            return
          }
          // 获取证书base64
          that.getSignCertb64()
        } else if (that.ps == 1) {
          // if (data.msg != undefined) {
          //   document.getElementById("oid").value = data.msg;
          // }
          // if (data.Result) {
          //   document.getElementById("signedtext").value = data.Signature;
          //   document.getElementById("cert").value = data.SignCert64;
          //   var submitData = {
          //     "appKey": appKey,
          //     "createTime": createTime,
          //     "groupType": "",
          //     "nonce": nonce,
          //     "passwdDigest": passwdDigest,
          //     "userName": userName,
          //     "parameter": {
          //       "userKeyId": "",
          //       "keyModel": "cert",
          //       "keyValue": data.SignCert64,
          //       "widthId": "",
          //       "digestMode": "0x00000001",
          //       "signData": signData, //签名数据原文（base64）
          //       "sign": data.Signature // 签名值
          //     }
          //   }
          //   console.log(submitData);
          //   this.publicKeyVerifySM2(submitData)
          // }else if(data.method == "SNCASignB64" && !data.Result){
          //   alert("获取SignB64失败，请确认pin码输入正确！")
          //   return
          // }
        } else if (that.ps == 2) {
          document.getElementById("cert").value = data.SignCert64;
          // 解析证书base64
          that.getCertObject()
        } else if (that.ps == 3) {
          // var cnString = data.certSubjectName.split('CN=');
          // document.getElementById("certname").value = cnString[1];
          // that.GetCertExtensionByOid();

          var cnstring = data.certSubjectName.split('CN=');
          document.getElementById("certname").value = cnstring[1];
          if (data['1.2.86.11.7.11'] != undefined) {
            document.getElementById("oid").value = data['1.2.86.11.7.11'];
          } else {
            that.getOid();
          }
        } else if (that.ps == 4) {
          // if(data.method == 'GetSignCertNameListstr'){
          //   let certname = JSON.parse(data.msg).certnamelist.split('&&')[0]
          //   if(that.thismethod == 'GetCertExtensionByOid'){
          //     // 获取客服信任号
          //     that.wsc.send(JSON.stringify({ method: 'GetCertExtensionByOid', 'certname': certname, 'oid': '1.2.86.11.7.11' }))
          //   }
          // }else if (data.method == 'GetCertExtensionByOid'){
          //   
          // }

          document.getElementById("oid").value = data.msg;
        } else if (that.ps == 5) {
          //获取到签名
          if (data.Result) {
            //签名
            that.autograph = data.Signature;
            document.getElementById("cert").value = data.SignCert64;
            //验签登录
            var data1 = {
              "autograph": that.autograph,
              "certSN": document.getElementById("SerialNumber").value,
              "inData": that.num,
              "oid": document.getElementById("oid").value,
              "cert": document.getElementById("cert").value
            }

            caLogin(data1).then(response => {
              that.$modal.closeLoading()
              that.$modal.loading("鉴别成功...")
              sessionStorage.setItem("needInit", response.data.needInit)
              sessionStorage.setItem("isUpdatePwd", response.data.isUpdatePwd)
              setToken(response.data.access_token)
              setExpiresIn(response.data.expires_in)
              if (sessionStorage.getItem("needInit") == "false") {
                if (sessionStorage.getItem("isUpdatePwd") == 'true') {  //true 调用修改密码页面
                  that.$modal.closeLoading()
                  that.$modal.msgSuccess("登陆系统成功")
                  that.$router.replace({ path: "/updatePwd" })
                } else {  //首页
                  iszt().then(response => {//判断是否是中铁项目1 是  其余返回的数据都不是中铁项目
                    sessionStorage.setItem("IS_ZT", response);
                  })
                  that.$modal.closeLoading()
                  that.$modal.msgSuccess("登陆系统成功")
                  that.$router.push({ path: that.redirect || "/index" }).catch(() => { });
                }
              } else {
                that.$modal.closeLoading()
                that.$modal.msgSuccess("登陆系统成功")
                that.$router.push({ path: "/initialization" })
              }
            }).catch(() => {
              that.$modal.closeLoading()
              that.$modal.msgError('登录失败')
            })
          } else {
            that.$modal.closeLoading()
            that.$modal.msgError(data.msg)
          }
        }
      };
    },

    handleEnterKey() {
      this.SignB64()
    },
    // 获取证书base64
    getSignCertb64() {
      if (this.wsc.readyState == 1) {
        var deviceSN = document.getElementById("SerialNumber").value;
        this.echo(deviceSN);
        this.ps = 2;
        this.wsc.send(JSON.stringify({
          method: "SNCAGetSignCertb64",
          deviceSN: deviceSN
        }));
      } else if (this.wsc.readyState == 0) {
        console.log("连接尚未建立");
      } else if (this.wsc.readyState == 2) {
        console.log("连接正在进行关闭");
      } else if (this.wsc.readyState == 3) {
        console.log("连接已经关闭或者连接不能打开");
      }
    },
    // 解析证书base64
    getCertObject() {
      if (this.wsc.readyState == 1) {
        var deviceSN = document.getElementById("cert").value;
        this.echo(deviceSN);
        this.ps = 3;
        this.wsc.send(JSON.stringify({
          method: "SNCAGetCertObject",
          certb64: deviceSN
        }));

      } else if (this.wsc.readyState == 0) {
        console.log("连接尚未建立");
      } else if (this.wsc.readyState == 2) {
        console.log("连接正在进行关闭");
      } else if (this.wsc.readyState == 3) {
        console.log("连接已经关闭或者连接不能打开");
      }
    },
    // 获取客服信任号
    getOid() {
      if (this.wsc.readyState == 1) {
        this.ps = 4
        var method = "GetCertExtensionByOid";
        var certname = document.getElementById("certname").value;
        var oid = "1.2.86.11.7.11";
        this.wsc.send(JSON.stringify({ method: method, oid: oid, certname: certname }));
      } else if (this.wsc.readyState == 0) {
        console.log("连接尚未建立");
      } else if (this.wsc.readyState == 2) {
        console.log("连接正在进行关闭");
      } else if (this.wsc.readyState == 3) {
        console.log("连接已经关闭或者连接不能打开");
      }
    },

    // 获取客服信任号
    GetCertExtensionByOid() {
      if (this.wsc.readyState == 1) {
        this.ps = 4
        this.wsc.send(JSON.stringify({ method: 'GetSignCertNameListstr' }));
        this.thismethod = 'GetCertExtensionByOid'
      } else if (this.wsc.readyState == 0) {
        console.log("连接尚未建立");
      } else if (this.wsc.readyState == 2) {
        console.log("连接正在进行关闭");
      } else if (this.wsc.readyState == 3) {
        console.log("连接已经关闭或者连接不能打开");
      }
    },

    // 获取SignB64
    SignB64() {
      if (this.wsc.readyState == 1) {
        var method = "SNCASignB64";
        var deviceSN = document.getElementById("SerialNumber").value;
        var pin = document.getElementById("password").value;
        if (!pin) {
          alert("请输入证书pin码");
          return
        }
        var randomdata = this.randomString(12);
        var Data64 = randomdata;
        /*  var encodedString = Base64.encode(Data64); */
        document.getElementById("source").value = Data64;
        // var b = new Base64();
        // this.signData = b.encode(Data64);
        this.signData = Data64
        this.ps = 1;
        // 获取客服信任号
        this.getOid();
        this.wsc.send(JSON.stringify({
          method: method,
          deviceSN: deviceSN,
          pin: pin,
          Data64: this.signData
        }));
      } else if (this.wsc.readyState == 0) {
        console.log("连接尚未建立");
      } else if (this.wsc.readyState == 2) {
        console.log("连接正在进行关闭");
      } else if (this.wsc.readyState == 3) {
        console.log("连接已经关闭或者连接不能打开");
      }
    },
    // SM2证书 P1公钥验签接口
    publicKeyVerifySM2(submitData) {
      // $.ajax({
      //   type: "post",
      //   url: reqUrl + "kms/keySignatureApi/publicKeyVerifySM2",
      //   async: false,
      //   timeout: 30000,
      //   contentType: "application/json",
      //   data: JSON.stringify(submitData),
      //   success: function (res) {
      //     console.log(res);
      //     if (res.code == 200 && res.data.result) {
      //       if(res.data.result){
      //         // 获取客服信任号
      //         alert("验签成功！客服信任号："+document.getElementById("oid").value)
      //       }
      //     } else {
      //       alert("验签失败！")
      //     }
      //   },
      //   error: function (err) {
      //     console.log(err);
      //   },
      // });
    },

    getNowFormatDate() {
      var date = new Date();
      var seperator1 = "-";
      var month = date.getMonth() + 1;
      var strDate = date.getDate();
      if (month >= 1 && month <= 9) {
        month = "0" + month;
      }
      if (strDate >= 0 && strDate <= 9) {
        strDate = "0" + strDate;
      }
      var currentdate = date.getFullYear() + seperator1 + month
        + seperator1 + strDate + seperator1 + date.getHours()
        + seperator1 + date.getMinutes() + seperator1
        + date.getSeconds();
      return currentdate;
    },
    getRandom(num) {
      var random = Math.floor((Math.random() + Math.floor(Math
        .random() * 9 + 1))
        * Math.pow(10, num - 1));
    },

    /**
     *
     * Base64 encode / decode
     *
     * @author haitao.tu
     * @date 2010-04-26
     * @email tuhaitao@foxmail.com
     *
     */
    Base64() {
      // private property
      var _keyStr = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+/=";
      // public method for encoding
      this.encode = function (input) {
        var output = "";
        var chr1, chr2, chr3, enc1, enc2, enc3, enc4;
        var i = 0;
        input = _utf8_encode(input);
        while (i < input.length) {
          chr1 = input.charCodeAt(i++);
          chr2 = input.charCodeAt(i++);
          chr3 = input.charCodeAt(i++);
          enc1 = chr1 >> 2;
          enc2 = ((chr1 & 3) << 4) | (chr2 >> 4);
          enc3 = ((chr2 & 15) << 2) | (chr3 >> 6);
          enc4 = chr3 & 63;
          if (isNaN(chr2)) {
            enc3 = enc4 = 64;
          } else if (isNaN(chr3)) {
            enc4 = 64;
          }
          output = output + _keyStr.charAt(enc1)
            + _keyStr.charAt(enc2) + _keyStr.charAt(enc3)
            + _keyStr.charAt(enc4);
        }
        return output;
      }
      // public method for decoding
      this.decode = function (input) {
        var output = "";
        var chr1, chr2, chr3;
        var enc1, enc2, enc3, enc4;
        var i = 0;
        input = input.replace(/[^A-Za-z0-9\+\/\=]/g, "");
        while (i < input.length) {
          enc1 = _keyStr.indexOf(input.charAt(i++));
          enc2 = _keyStr.indexOf(input.charAt(i++));
          enc3 = _keyStr.indexOf(input.charAt(i++));
          enc4 = _keyStr.indexOf(input.charAt(i++));
          chr1 = (enc1 << 2) | (enc2 >> 4);
          chr2 = ((enc2 & 15) << 4) | (enc3 >> 2);
          chr3 = ((enc3 & 3) << 6) | enc4;
          output = output + String.fromCharCode(chr1);
          if (enc3 != 64) {
            output = output + String.fromCharCode(chr2);
          }
          if (enc4 != 64) {
            output = output + String.fromCharCode(chr3);
          }
        }
        output = _utf8_decode(output);
        return output;
      }
      // private method for UTF-8 encoding
      var _utf8_encode = function (string) {
        string = string.replace(/\r\n/g, "\n");
        var utftext = "";
        for (var n = 0; n < string.length; n++) {
          var c = string.charCodeAt(n);
          if (c < 128) {
            utftext += String.fromCharCode(c);
          } else if ((c > 127) && (c < 2048)) {
            utftext += String.fromCharCode((c >> 6) | 192);
            utftext += String.fromCharCode((c & 63) | 128);
          } else {
            utftext += String.fromCharCode((c >> 12) | 224);
            utftext += String
              .fromCharCode(((c >> 6) & 63) | 128);
            utftext += String.fromCharCode((c & 63) | 128);
          }
        }
        return utftext;
      }
      // private method for UTF-8 decoding
      var _utf8_decode = function (utftext) {
        var string = "";
        var i = 0;
        var c, c1, c2 = 0;
        var c3;
        while (i < utftext.length) {
          c = utftext.charCodeAt(i);
          if (c < 128) {
            string += String.fromCharCode(c);
            i++;
          } else if ((c > 191) && (c < 224)) {
            c2 = utftext.charCodeAt(i + 1);
            string += String.fromCharCode(((c & 31) << 6)
              | (c2 & 63));
            i += 2;
          } else {
            c2 = utftext.charCodeAt(i + 1);
            c3 = utftext.charCodeAt(i + 2);
            string += String.fromCharCode(((c & 15) << 12)
              | ((c2 & 63) << 6) | (c3 & 63));
            i += 3;
          }
        }
        return string;
      }
    },

    randomString(length) {
      var str = '0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ';
      var result = '';
      for (var i = length; i > 0; --i)
        result += str[Math.floor(Math.random() * str.length)];
      return result;
    },


    Button3() {
      if (this.wsc.readyState == 1) {
        window.location.reload();
      } else if (this.wsc.readyState == 0) {
        console.log("连接尚未建立");
      } else if (this.wsc.readyState == 2) {
        console.log("连接正在进行关闭");
      } else if (this.wsc.readyState == 3) {
        console.log("连接已经关闭或者连接不能打开");
      }
    },

    //登录
    login() {
      var that = this;

      if (this.wsc.readyState == 1) {
        // var method = "Pkcs7SignText";
        // var pin = document.getElementById("password").value;
        // var certname=document.getElementById("certname").value;
        // if (!pin) {
        //   alert("请输入证书pin码");
        //   return
        // }
        // that.$modal.loading("正在身份鉴别...")
        // //获取随机数
        // getRandom().then(res=>{
        //   if(res.code=='200'){
        //     this.ps = 5;
        //     this.num = res.msg;
        //     //进行签名
        //     this.wsc.send(JSON.stringify({
        //       method: method,
        //       certname: certname,
        //       pin: pin,
        //       source: this.num
        //     }));
        //   }
        // })















        var method = "SNCASignB64";


        var deviceSN = document.getElementById("SerialNumber").value;
        this.echo(deviceSN);



        var pin = document.getElementById("password").value;
        this.echo(pin);

        if (!pin) {
          alert("请输入证书pin码");
          return
        }
        that.$modal.loading("正在身份鉴别...")
        //获取随机数
        getRandom().then(res => {
          if (res.code == '200') {
            this.ps = 5;
            this.num = res.msg;

            console.log(deviceSN, "=deviceSN", pin, "=pin")
            //进行签名
            this.wsc.send(JSON.stringify({
              method: method,   //消息名称
              deviceSN: deviceSN,
              pin: pin,   //证书PIN码
              Data64: this.num
            }));
          }
        })
        /*  var encodedString = Base64.encode(Data64); */
      } else if (this.wsc.readyState == 0) {
        console.log("连接尚未建立");
      } else if (this.wsc.readyState == 2) {
        console.log("连接正在进行关闭");
      } else if (this.wsc.readyState == 3) {
        console.log("连接已经关闭或者连接不能打开");
      }
    },

    // 返回登录页
    goBack() {
      this.flag = false
      this.wsc.onclose()
      this.$router.push({ path: "/login" })
    },


    Base64() {
      // private property
      _keyStr = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+/=";
      // public method for encoding
      this.encode = function (input) {
        var output = "";
        var chr1, chr2, chr3, enc1, enc2, enc3, enc4;
        var i = 0;
        input = _utf8_encode(input);
        while (i < input.length) {
          chr1 = input.charCodeAt(i++);
          chr2 = input.charCodeAt(i++);
          chr3 = input.charCodeAt(i++);
          enc1 = chr1 >> 2;
          enc2 = ((chr1 & 3) << 4) | (chr2 >> 4);
          enc3 = ((chr2 & 15) << 2) | (chr3 >> 6);
          enc4 = chr3 & 63;
          if (isNaN(chr2)) {
            enc3 = enc4 = 64;
          } else if (isNaN(chr3)) {
            enc4 = 64;
          }
          output = output + _keyStr.charAt(enc1)
            + _keyStr.charAt(enc2) + _keyStr.charAt(enc3)
            + _keyStr.charAt(enc4);
        }
        return output;
      }
      // public method for decoding
      this.decode = function (input) {
        var output = "";
        var chr1, chr2, chr3;
        var enc1, enc2, enc3, enc4;
        var i = 0;
        input = input.replace(/[^A-Za-z0-9\+\/\=]/g, "");
        while (i < input.length) {
          enc1 = _keyStr.indexOf(input.charAt(i++));
          enc2 = _keyStr.indexOf(input.charAt(i++));
          enc3 = _keyStr.indexOf(input.charAt(i++));
          enc4 = _keyStr.indexOf(input.charAt(i++));
          chr1 = (enc1 << 2) | (enc2 >> 4);
          chr2 = ((enc2 & 15) << 4) | (enc3 >> 2);
          chr3 = ((enc3 & 3) << 6) | enc4;
          output = output + String.fromCharCode(chr1);
          if (enc3 != 64) {
            output = output + String.fromCharCode(chr2);
          }
          if (enc4 != 64) {
            output = output + String.fromCharCode(chr3);
          }
        }
        output = _utf8_decode(output);
        return output;
      }
      // private method for UTF-8 encoding
      _utf8_encode = function (string) {
        string = string.replace(/\r\n/g, "\n");
        var utftext = "";
        for (var n = 0; n < string.length; n++) {
          var c = string.charCodeAt(n);
          if (c < 128) {
            utftext += String.fromCharCode(c);
          } else if ((c > 127) && (c < 2048)) {
            utftext += String.fromCharCode((c >> 6) | 192);
            utftext += String.fromCharCode((c & 63) | 128);
          } else {
            utftext += String.fromCharCode((c >> 12) | 224);
            utftext += String
              .fromCharCode(((c >> 6) & 63) | 128);
            utftext += String.fromCharCode((c & 63) | 128);
          }
        }
        return utftext;
      }
      // private method for UTF-8 decoding
      _utf8_decode = function (utftext) {
        var string = "";
        var i = 0;
        var c = c1 = c2 = 0;
        while (i < utftext.length) {
          c = utftext.charCodeAt(i);
          if (c < 128) {
            string += String.fromCharCode(c);
            i++;
          } else if ((c > 191) && (c < 224)) {
            c2 = utftext.charCodeAt(i + 1);
            string += String.fromCharCode(((c & 31) << 6)
              | (c2 & 63));
            i += 2;
          } else {
            c2 = utftext.charCodeAt(i + 1);
            c3 = utftext.charCodeAt(i + 2);
            string += String.fromCharCode(((c & 15) << 12)
              | ((c2 & 63) << 6) | (c3 & 63));
            i += 3;
          }
        }
        return string;
      }
    },

    getNowFormatDate() {
      var date = new Date();
      var seperator1 = "-";
      var month = date.getMonth() + 1;
      var strDate = date.getDate();
      if (month >= 1 && month <= 9) {
        month = "0" + month;
      }
      if (strDate >= 0 && strDate <= 9) {
        strDate = "0" + strDate;
      }
      var currentdate = date.getFullYear() + seperator1 + month
        + seperator1 + strDate + seperator1 + date.getHours()
        + seperator1 + date.getMinutes() + seperator1
        + date.getSeconds();
      return currentdate;
    }





  }
}
</script>

<style rel="stylesheet/scss" lang="scss">
.login {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100%;
  background-image: url("../assets/images/login-background.jpg");
  background-size: cover;
}

.title {
  margin: 0px auto 30px auto;
  text-align: center;
  color: #707070;
}

.login-form-key {
  border-radius: 6px;
  background: #ffffff;
  width: 400px;
  padding: 25px 25px 5px 25px;
  position: absolute;
  right: 282px;
  top: 40%;
  box-shadow: 10px 10px 10px #707070;

  .el-input {
    height: 38px;

    input {
      height: 38px;
    }
  }

  .input-icon {
    height: 39px;
    width: 14px;
    margin-left: 2px;
  }
}

.login-tip {
  font-size: 13px;
  text-align: center;
  color: #bfbfbf;
}

.login-code {
  width: 33%;
  height: 38px;
  float: right;

  img {
    cursor: pointer;
    vertical-align: middle;
  }
}

.el-login-footer {
  height: 40px;
  line-height: 40px;
  position: fixed;
  bottom: 0;
  width: 100%;
  text-align: center;
  color: #fff;
  font-family: Arial;
  font-size: 12px;
  letter-spacing: 1px;
}

.login-code-img {
  height: 38px;
}</style>
